"use client"

import { ColumnDef } from "@tanstack/react-table"
import { Role } from "@/types/admin"
import StatusBadge from "@/components/status-badge"
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { MoreHorizontal, Pencil, Trash2, Shield } from "lucide-react"

interface ColumnActionsProps {
  onEdit: (role: Role) => void
  onDelete: (role: Role) => void
}

export const columns = ({ onEdit, onDelete }: ColumnActionsProps): ColumnDef<Role>[] => [
  {
    accessorKey: "name",
    header: "角色名称",
    cell: ({ row }) => {
      return (
        <div className="font-medium flex items-center">
          <Shield className="h-4 w-4 mr-2 text-primary" />
          {row.getValue("name")}
        </div>
      )
    }
  },
  {
    accessorKey: "description",
    header: "描述",
  },
  {
    accessorKey: "permissions",
    header: "权限",
    cell: ({ row }) => {
      const permissions = row.getValue("permissions") as string[]
      return (
        <div className="flex flex-wrap gap-1">
          {permissions.slice(0, 3).map((permission, i) => (
            <StatusBadge key={i} status="default" className="text-xs">
              {permission}
            </StatusBadge>
          ))}
          {permissions.length > 3 && (
            <StatusBadge status="primary" className="text-xs">
              +{permissions.length - 3} 更多
            </StatusBadge>
          )}
        </div>
      )
    },
  },
  {
    id: "actions",
    cell: ({ row }) => {
      const role = row.original
      
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0 rounded-full hover:bg-muted">
              <span className="sr-only">打开菜单</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="rounded-lg card-shadow">
            <DropdownMenuLabel>操作</DropdownMenuLabel>
            <DropdownMenuItem 
              onClick={() => onEdit(role)}
              className="cursor-pointer flex items-center"
            >
              <Pencil className="mr-2 h-4 w-4" />编辑
            </DropdownMenuItem>
            <DropdownMenuItem 
              className="text-destructive cursor-pointer flex items-center"
              onClick={() => onDelete(role)}
            >
              <Trash2 className="mr-2 h-4 w-4" />删除
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
] 